<!-- member-center/index.vue -->
<template>
  <view class="member-container">
    <!-- 顶部导航栏 -->

    <view class="header-bg">
      <image src="@/assets/pic/my.png" mode="widthFix"></image>
      <view class="header">
        <view class="user-info">
          <image class="avatar" src="@/assets/pic/ico.png"></image>
          <view class="welcome-text">
            <text class="hello">Hi, 你好呀</text>
            <text class="username">{{ userName }}</text>
          </view>
        </view>
        <view class="login-btn" @tap="handleLogin">登录/注册</view>
      </view>
    </view>

    <!-- 会员中心入口 -->
    <!-- <view class="vip-card">
      <view class="vip-title">森链智选会员中心</view>
      <view class="vip-btn" @tap="handleBecomeMember">成为会员</view>
    </view> -->

    <!-- 订单列表 -->
    <view class="order-section">
      <view class="section-header">
        <view class="section-title">我的订单</view>
        <view class="view-all" @tap="viewAllOrders">查看全部</view>
      </view>

      <view class="order-list">
        <view class="order-item" v-for="(item, index) in orderTypes" :key="index" @tap="goToOrder(item)">
          <image class="order-icon" :src="item.icon"></image>
          <text class="order-text">{{ item.text }}</text>
        </view>
      </view>
    </view>

    <!-- 其他 -->
    <view class="cell" :style="{ margin: '40rpx 0 0 0', padding: '0 20rpx' }">
      <view class="cell-frist" :style="{ display: 'flex', justifyContent: 'space-between', margin: '20rpx 0' }"
        v-for="(cell, index) in cellList" :key="index" @tap="jump(cell)">
        <view class="function" :style="{ display: 'flex' }">
          <view>
            <img :src="cell.icon" :style="{width:'40rpx',height:'40rpx',marginRight:'10rpx'}">
          </view>
          <text>{{ cell.title }}</text>
        </view>
        <view>
          <image src="@/assets/icon/right.png" :style="{width:'40rpx',height:'40rpx'}"></image>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup>
import { ref } from "vue";
import Taro from "@tarojs/taro";
import c1 from "@/assets/pic/c1.png";
import c2 from "@/assets/pic/c2.png";
import c3 from "@/assets/pic/c3.png";
import c4 from "@/assets/pic/c4.png";
import c5 from "@/assets/pic/c5.png";
import address from "@/assets/icon/address.png"
import agreement from "@/assets/icon/agreement.png"
import clean from "@/assets/icon/clean.png"
import { styles } from "@tarojs/shared/dist/template";
import { initShare } from "@/utils/config";
import { onMounted } from 'vue';

/**
 * 用户名状态
 * @type {import('vue').Ref<string>}
 */
const userName = ref("路路");

/**
 * 订单类型列表数据
 * @type {Array<{text: string, icon: string}>}
 */
const orderTypes = [
  { text: "待付款", icon: c1 },
  { text: "待发货", icon: c2 },
  { text: "待收货", icon: c3 },
  { text: "已完成", icon: c4 },
  { text: "退款/售后", icon: c5 },
];

/**
 * 处理登录按钮点击
 * 性能优化：使用 Taro.navigateTo 进行页面跳转，避免重复渲染
 */
const handleLogin = () => {
  Taro.navigateTo({
    url: "/pages-detail/login/login",
  });
};

/**
 * 处理成为会员按钮点击
 * 性能优化：使用防抖避免重复点击
 */
const handleBecomeMember = () => {
  Taro.showToast({
    title: "正在进入会员页",
    icon: "none",
  });
};

// 单元格列表
const cellList = ref([
  {
    title: '收货地址管理',
    icon: address,
  },
  {
    title: '隐私协议',
    icon: agreement,
  },
  {
    title: '清理缓存',
    icon: clean,
  }
])
/**
 * 查看全部订单
 * 性能优化：预加载订单数据提升用户体验
 */
const viewAllOrders = () => {
  Taro.navigateTo({
    url: "/pages-detail/my/order",
  });
};

// 订单跳转
const goToOrder = (item) => {
  if (item.text === "扫描订单") {
    Taro.scanCode({
      success: (res) => {
        console.log(res);
        // res.result
        // 跳转到订单页面
        Taro.navigateTo({
          url: "/pages-detail/coupon/pay?code=" + res.result, // 跳转到订单页面
        });
      },
      fail: (res) => {
        console.log(res);
        Taro.navigateTo({
          url: "/pages-detail/coupon/pay?code=" + '123',
        });
      },
    });
    return;
  }

  if (item.text === "待付款") {
    Taro.navigateTo({
      url: "/pages-detail/my/order?id=-1",
    });
    return;
  }
  if (item.text === "待发货") {
    Taro.navigateTo({
      url: "/pages-detail/my/order?id=0",
    });
    return;
  }
  if (item.text === "待收货") {
    Taro.navigateTo({
      url: "/pages-detail/my/order?id=1",
    });
    return;
  }

  if (item.text === "已完成") {
    Taro.navigateTo({
      url: "/pages-detail/my/order?id=2",
    });
    return;
  }else if(item.text === "退款/售后") {
    Taro.navigateTo({
      url: "/pages-detail/my/order?id=3",
    })
  }
  
  // 跳转到订单页面
  Taro.navigateTo({
    url: "/pages-detail/my/order",
  });
};

// 其他服务跳转
const jump = (item) => {
  if (item.title == "收货地址管理") {
    Taro.navigateTo({
      url: "/pages-detail/my/address",
      success() {
        console.log('跳转成功');
      }
    })
  }else if (item.title == "隐私政策") {
    Taro.navigateTo({
      url: "/pages-detail/my/privacy",
      success() {
        console.log('跳转成功');
      }
    })
  }else if (item.title == "清理缓存"){
    Taro.clearStorageSync();
    Taro.showToast({
      title: '缓存清理成功',
      icon: 'success'
    });
  }

}
</script>

<style lang="scss">
/* 会员容器 */
.member-container {
  background-color: #f7f7f7;
  min-height: 100vh;
  border-radius: 30rpx 30rpx 0 0;
  overflow: hidden;
}

.header-bg {
  position: relative;

  image {
    width: 100%;
  }

  /* 顶部区域 */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 40rpx 40rpx;
    position: absolute;
    width: 100%;
    top: 160rpx;
    left: 0;
    z-index: 1;
  }
}

.user-info {
  display: flex;
  align-items: center;
  flex: 1;

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 20rpx;
    background-color: #f0f0f0;
    border: 2rpx solid #939393;
  }

  .welcome-text {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
}

.hello {
  font-size: 32rpx;
  color: #333;
}

.username {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-left: 10rpx;
}

.login-btn {
  padding: 15rpx 30rpx;
  background-color: #0a4d38;
  color: #fff;
  border-radius: 30rpx;
  font-size: 28rpx;
}

/* 会员卡片 */
.vip-card {
  margin: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  text-align: center;
}

.vip-title {
  font-size: 36rpx;
  color: #333;
  margin-bottom: 30rpx;
}

.vip-btn {
  padding: 15rpx 40rpx;
  background-color: #0a4d38;
  color: #fff;
  border-radius: 30rpx;
  font-size: 28rpx;
}

/* 订单区域 */
.order-section {
  margin: 30rpx 30rpx 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.section-title {
  font-size: 32rpx;
  color: #333;
}

.view-all {
  font-size: 26rpx;
  color: #666;
}

.order-list {
  display: flex;
  justify-content: space-between;
  padding: 30rpx 0;
}

.order-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}

.order-icon {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 10rpx;
}

.order-text {
  font-size: 24rpx;
  color: #666;
}
</style>
